<template>
  <div>
    <el-card>
      <el-container>
        <el-aside width="250px">
          <!-- <div class="sear">
            <span class="qq">全部类型</span>
            <el-input class="ww" suffix-icon="el-icon-search"></el-input>
          </div> -->
          <el-tree
            :data="data1"
            node-key="id"
            ref="tree"
            accordion
            :props="defaultProps"
            @node-click="handleNodeClick"
            :highlight-current="true"
            check-change="xzc"
          ></el-tree>
        </el-aside>
        <el-main>
          <conent
            :cont="data"
            ref="conent"
            :zxczxfasdgaaaa="zxczxfasdgaaaa"
            :hgh="hgh"
            :hahaha="hahaha"
          />
        </el-main>
      </el-container>
    </el-card>
  </div>
</template>

<script>
import conent from "./content.vue";
import axios from "axios";
import {Getsorteds} from 'network/api/studentscore'
// import pubsub from 'pubsub-js'
export default {
  data() {
    return {
      data1: [],
      data: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      a: [],
    };
  },
  methods: {
    async hahaha() {
      const res = await Getsorteds();
      this.data1 = res.data;
    },
    xzc() {
      console.log("111");
    },
    hgh(content) {
      // console.log(content, this.data);
      let flag = false;
      let xindex = null;
      if (typeof(content)=='number'){
        this.data.forEach((item,index)=>{
          if (item.id==content){
            this.data.splice(index,1)
          }
        })
        return ;
      }
      this.data.forEach((item, index) => {
        if (item.id == content.id) {
          flag = true;
          xindex = index;
        }
      });
      if (flag) {
        let cont1 = JSON.stringify(this.data);
        let cont2 = JSON.parse(cont1);
        cont2[xindex] = content;
        this.data = cont2;
      } else {
        this.data.push(content);
      }
    },
    zxczxfasdgaaaa(content, yuan) {
      console.log(this.$refs.tree.store.root, 456, yuan);
      console.log(yuan,123)
      this.$refs.tree.store.root.childNodes.forEach((item1, index1) => {
        if (item1.label == yuan.label&&item1.key == yuan.id) {
          item1.expanded = true;
          return;
        }
        item1.expanded = false;
        item1.childNodes.forEach((item2, index2) => {
          if (item2.label == yuan.label&&item2.key == yuan.id) {
            item1.expanded = true;
            item2.expanded = true;
            return;
          }
           item2.expanded = false;
          item2.childNodes.forEach((item3, index3) => {
            if (item3.label == yuan.label&&item3.key == yuan.id) {
              item1.expanded = true;
              item2.expanded = true;
              item3.expanded = true;
              return;
            }
             item3.expanded = false;
            item3.childNodes.forEach((item4, index4) => {
              if (item4.label == yuan.label&&item4.key == yuan.id) {
                item1.expanded = true;
                item2.expanded = true;
                item3.expanded = true;
                item4.expanded = true;
                return;
              }
                item4.expanded = false;

            });
          });
        });
      });
      this.data = content;
    },
    handleNodeClick(data) {
      // console.log(data)
      // this.$treeNodeId = 300
      // console.log(this.$refs.tree.$treeNodeId,456)
      //  if (data.rank === 3) {
      this.$refs.conent.z(data);
      // }
      // if(data.rank===3)
      // this.data = data.children;
    },
  },
  computed: {},
  components: {
    conent,
  },
  async created() {
    const res = await Getsorteds()
    this.data1 = res.data;
    // this.data1.forEach(item=>{
    //   item.children.forEach(item2=>{
    //     item2.children.forEach(item3=>{
    //       item3.children=[]
    //     })
    //   })
    // })
    this.data = res.data;
  },
  mounted() {},
};
</script>

<style>
.el-aside {
  /* padding: 50px; */
  height: 620px;
}
.qq {
  display: inline-block;
  cursor: pointer;
  font-weight: 600;
  width: 76px;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-size: 10px;
  line-height: 25px;
}
.el-input__inner {
  width: 90%;
  height: 25px;
  line-height: 25px;
}
.sear {
  display: flex;
}
.el-input__icon {
  line-height: 25px;
  width: 60px;
}
.el-tree {
  margin-top: 15px;
}
.el-main {
  border: 2px solid rgb(234, 234, 234);
}
</style>
